import type { PropsWithChildren } from "react";
import { useDrop } from "react-dnd";
import { message } from 'antd'
import { useComponentsStore } from '../../store/components'
import type { CommonComponentProps } from '../../interface'
import { useComponentConfigStore } from '../../store/component-config'

export default function Page({ id, name, children }: CommonComponentProps) {
    const [messageApi, contextHolder] = message.useMessage();
    const { addComponent } = useComponentsStore();
    const { componentConfig } = useComponentConfigStore()

    const [{ canDrop }, dropRef] = useDrop(() => (
        {
            accept: ['Button', 'Container', 'Page'],
            // 被拖动的内容进入到目标元素时触发
            drop(item: { type: string }) {
                // console.log(item);
                messageApi.success(item.type);
                // 将该组件的对象植入到json中
                const props = componentConfig?.[item.type]?.['defaultProps']
                addComponent({
                    id: new Date().getTime(),
                    name: item.type,
                    // desc: componentConfig?.[item.type]?.['desc'],
                    props: props
                }, id)
            },
            // 被拖动的内容进入到目标元素时触发，返回一个对象，用于判断是否可以放置
            // 可以放置返回true，不可以放置返回false
            collect: (monitor) => ({
                canDrop: monitor.canDrop()
            })


        }
    ))
    return (
        <>
            {contextHolder}
            <div className='p-[20px] h-[100%] box-border' ref={dropRef}
                style={{ border: canDrop ? '2px solid blue' : 'none' }}>
                {children}
            </div >
        </>
    )
}
